<template>
  <div>
    <el-input placeholder="请输入账户名" v-model="username">
      <template slot="prepend">账号：</template>
    </el-input>
    <el-input placeholder="请输入密码" v-model="password">
      <template slot="prepend">密码：</template>
    </el-input>
    <el-button type="primary" @click="toHome">登录</el-button>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data(){
      return{
        username: '',
        password: '',
      }
    },
    methods: {
      //点击登录按钮执行访问请求并判断是否登陆
      toHome() {
        this.$axios.post('/login', {
          username: this.username,
          password: this.password
        })
          .then(res => {                    //请求成功后执行函数
            if (res.data.code === 200) {
              this.$store.commit('changeToken',res.data.token)
              this.$router.push('/')	//登录验证成功路由实现跳转
              this.$notify({
                title: '提示',
                message: '用户登录成功',
                duration: 3000
              });
            } else {
              this.$notify({
                title: '提示',
                message: '用户登录失败',
                duration: 3000
              });
            }
          })
          .catch(err => {                   //请求错误后执行函数
            his.$notify({
              title: '提示',
              message: '用户访问错误',
              duration: 3000
            });
            console.log(err)
          })
      }
    }
  }
</script>
